import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    // name 必须加，从现在开始，我们全部用 name 的方式跳转路由
    name: 'login',
    path: '/login',
    // 路由懒加载，当你访问这个 /login 路由页面时，才去加载对应的页面组件代码
    component: () => import('@/views/Login/index.vue'),
  },
  {
    // name: 'layout', // 因为有默认子路由，所以name无用
    path: '/',
    component: () => import('@/views/Layout/index.vue'),
    children: [
      {
        name: 'home',
        path: '/',
        component: () => import('@/views/Home/index.vue'),
      },
      {
        name: 'qa',
        path: '/qa',
        component: () => import('@/views/QA/index.vue'),
      },
      {
        name: 'video',
        path: '/video',
        component: () => import('@/views/Video/index.vue'),
      },
      {
        name: 'my',
        path: '/my',
        component: () => import('@/views/My/index.vue'),
      },
    ],
  },
  {
    name: 'search',
    path: '/search',
    component: () => import('@/views/Search/index.vue'),
  },
  {
    name: 'article',
    path: '/article/:id',
    component: () => import('@/views/Article/index.vue'),
    props: true, // 开启 Props 传参，将路由动态参数映射到组件的 props 中，更推荐这种做法
  },
]

const router = new VueRouter({
  routes,
})

export default router
